<template>
  <div class="box_wrapper">
    <div class="tips_box">
      <p class="tips">会员价格限制</p>
      <p class="grey">在这里可以设置默认的最小价格限制</p>
    </div>
    <el-form
      ref="ruleFormRef"
      label-position="right"
      label-width="85px"
      class="form_box"
    >
      <el-row>
        <el-col :span="24" class="add_box">
          <el-button
            type="primary"
            @click="add"
            :disabled="vipList.length >= 8"
          >
            <el-icon style="margin-right: 5px">
              <Plus />
            </el-icon>
            添加价格阶梯
          </el-button>
        </el-col>
      </el-row>

      <draggable
        v-if="vipList.length > 0"
        tag="ul"
        :list="vipList"
        class="list-group"
        handle=".handle"
        item-key="days"
      >
        <template #item="{ element, index }">
          <el-row class="item_box">
            <el-icon class="handle iconRemove">
              <Sort />
            </el-icon>
            <el-icon class="iconRemove red" @click="removeLadder(index)">
              <RemoveFilled />
            </el-icon>

            <el-col :span="8">
              <el-form-item label="会员天数">
                <el-input-number v-model="element.days" :max="365" :min="1" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="最小限制价格" label-width="100px">
                <el-input-number
                  v-model="element.minLimit"
                  :min="1"
                  :max="9999"
                />
                <span style="margin-left: 5px">金币</span>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </draggable>

      <!-- 没有阶梯价 -->
      <el-empty
        v-else
        :image-size="100"
        description="分销商未设置最低价，默认为全局设置的最低价格"
      />

      <el-row v-if="typePrice == 1">
        <el-col :span="18">
          <el-form-item label="" label-width="30" style="margin-top: 20px">
            <el-button type="primary" @click="save">
              &nbsp; 保存配置 &nbsp;
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { Plus, RemoveFilled, Sort } from "@element-plus/icons-vue";
import draggable from "vuedraggable";

const props = defineProps({
  typePrice: {
    type: Number,
    default: 1, // 1 为全局价格限制， 2 为分销商列表价格限制
  },
});

// const form = {
//   vipList: []
// };
// const formData = ref(Object.assign({}, form));

const vipList = ref<any>([]);

// 添加阶梯
const add = () => {
  vipList.value.push({ days: undefined, minLimit: undefined });
};

// 删除价格阶梯
const removeLadder = (i: number) => {
  vipList.value.splice(i, 1);
};

// 保存价格阶梯
const emit = defineEmits(["save"]);
const save = () => {
  emit("save", vipList.value);
};

defineExpose({
  vipList,
});
</script>

<style scoped lang="scss">
.box_wrapper {
  height: auto;
  padding: 0 20px;
  // padding-top: 20px;
  background-color: #fff;

  .tips_box {
    padding-bottom: 20px;
    padding-left: 20px;
    margin: unset;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;

    p {
      font-size: 14px;
    }

    .tips {
      margin-bottom: 4px;
      font-size: 20px;
      color: #363636;
    }
  }

  .form_box {
    .add_box {
      padding-left: 30px;
      margin-bottom: 20px;
    }

    .item_box {
      display: flex;
      justify-content: flex-start;
      padding-left: 30px;
      // align-items: center;
      .iconRemove {
        height: 32px;
        font-size: 18px;
        cursor: pointer;
      }

      .handle {
        margin-right: 12px;
        color: #363636;
        cursor: grab;
      }
    }
  }
}
</style>
